<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表单元素</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="{{ADMIN_PATH}}layui/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="{{ADMIN_PATH}}layui/layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="{{ADMIN_PATH}}ztree/css/zTreeStyle/zTreeStyle.css" media="all">
</head>
<body>

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">菜单树</div>
        <div class="layui-card-body layui-row layui-col-space10">
          <ul id="treeDemo" class="ztree"></ul>
        </div>
      </div>
    </div>
    <div class="layui-col-md9">
      <div class="layui-card">

        <div class="layui-card-body">
          <div class="layui-card">
            <div class="layui-card-header">数据表格的重载</div>

            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">文章ID</label>
                  <div class="layui-input-inline">
                    <input type="text" name="uid" placeholder="请输入" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">作者</label>
                  <div class="layui-input-inline">
                    <input type="text" name="nickname" placeholder="请输入" autocomplete="off" class="layui-input">
                  </div>
                </div>


                <div class="layui-inline">
                  <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                  </button>
                  <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
                </div>
              </div>
            </div>


            <div class="layui-card-body">
              <table class="layui-hide" id="test-table-reload" lay-filter="user"></table>
              <script type="text/html" id="test-table-operate-barDemo">

                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

              </script>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js"></script>
<script src="{{ADMIN_PATH}}ztree/js/jquery-1.4.4.min.js"></script>
<script src="{{ADMIN_PATH}}ztree/js/jquery.ztree.core.js"></script>
<script>
    var index_url="{{url('admin/config/group')}}";
    var save_url="{{url('admin/menu/save')}}";
    var edit_url="{{url('admin/menu/edit')}}";
    var submit_form;
    layui.config({
        base: '{{ADMIN_PATH}}layui/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,form = layui.form;
        var table = layui.table;
        //=========================生成表格=================================
        table.render({
            elem: '#test-table-reload'
            ,url: index_url
            ,method:'post'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
                ,{field:'sort', title: '排序', width:80, sort: true, fixed: true,edit: 'text'}
                ,{field:'name', title: '配置名称', width:220, sort: true, fixed: true}
                ,{field:'title', title: '配置说明', width:220, sort: true, fixed: true}
                ,{field:'value', title: '对应值', width:220, sort: true, fixed: true}
                ,{field:'status', title: '状态', width:80, sort: true, fixed: 'right',templet:temp_switch_tpl}
                ,{width:120,title:'操作',align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
            ]]
            //进行按钮操作
            ,page: true
            ,done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);
                //得到当前页码
                console.log(curr);
                //得到数据总量
                console.log(count);
            }
        });
        //===========================表格编辑处理=================================================
        table.on('edit(test-table-reload)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value, {
                offset: '15px'
            });
        });
        //=========================按钮事件=======================
        $('.layui-btn.layuiadmin-btn-list').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            return false;
        });


        //===========================外部按钮事件=====================
        var active = {
            del_menu: function(){
                layer.msg("删除");
                return false;
            },
            subadd: function(){
                var id=$(".input_id").val();
                //清空表单元素值
                submit_form.val("component-form-element",{title:'',url:'',icon:'',group:'',sort:'',hide:'',is_dev:'',tip:'',id:'',pid:id});
                return false;
            }
        };
        form.render(null, 'component-form-element');
        element.render('breadcrumb', 'breadcrumb');
        //========================提交表单数据====================
        form.on('submit(component-form-element)', function(data){
            $.post(save_url, data.field, success, "json");
            return false;
        });

        //========================表单数据返回处=====================================
        function success(res){
            if(res.status==200){
                 layer.msg("保存成功");
            }else{
                layer.msg("操作失败");
            }
        }
        submit_form=form;


    });
</script>

<SCRIPT type="text/javascript">
  //==========================ztree树成生成与事件================================
    <!--
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick
        }
    };

    var zNodes ={!! $menu_list !!};
    var  className = "dark";

    function onClick(event, treeId, treeNode, clickFlag) {
        $.ajax({
            type: 'POST',
            url: edit_url,
            data: {id:treeNode.id},
            async: false,
            dataType: 'json',
            success: function (res) {
                if (res.status==200) {
//========================表单数据宣染=====================================

                    //submit_form.val("component-form-element",res.data);
                } else {
                    layer.msg(res.msg);
                }
            },
            error: function () {
                layer.msg("异常");
            }
        });
    }
    function getTime() {
        var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds();
        return (h+":"+m+":"+s);
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //-->
  function temp_switch_tpl(d){
      if(d.status==1){
          return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭" checked>';
      }else{
          return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">';
      }

  }
</SCRIPT>
</body>
</html>